/*
 * @Author: yangzonglong
 * @Date: 2021-03-05 11:20:41
 * @version: v1.0.0
 * @Descripttion: formItem 控制器
 * @LastEditors: yangzonglong
 * @LastEditTime: 2023-03-22 19:02:27
 * @Auditor:
 */
import React from 'react';
import { memo, useCallback } from 'react';
import { Form, Input, Checkbox, Radio } from 'antd';
import ShowPrintController from './ShowPrintController';
import { FormItemProps } from './InputFormItemController';

const FormItem = Form.Item;
interface IProps {
  type?: string;
  hideInitialValue?: boolean;
  showTextAlign?: boolean;
  onChange(k: string, v: any): void;
  options?: FormItemProps;
  placeholder?: string;
  placeholderEn?: string;
  onChangePlaceholder?(placeholder: string): void;
  onChangePlaceholderEn?(placeholder: string): void;
  children?: React.ReactNode;
  hidePlaceholder?: boolean; // 为true时隐藏placeholder
  hideRate?: boolean;
  hideRequired?: boolean;
}

export default memo(
  ({ options, onChange, placeholder, placeholderEn, onChangePlaceholder, onChangePlaceholderEn, children, hidePlaceholder, hideRate, hideRequired, showTextAlign }: IProps) => {
    const onChangeName = useCallback((e) => onChange('name', e.target.value), [onChange]);
    const onChangeLabel = useCallback((e) => onChange('label', e.target.value), [onChange]);
    const onChangeLabelEn = useCallback((e) => onChange('labelEn', e.target.value), [onChange]);
    const onChangeRequired = useCallback((e) => onChange('required', e.target.checked), [onChange]);
    const onChangeDisabled = useCallback((e) => onChange('disabled', e.target.checked), [onChange]);
    // const initialValue = useCallback((e) => onChange('initialValue', e.target.value), [onChange]);

    const onChangeWidth = useCallback(
      (e) => {
        onChange('style', { ...options?.style, width: e.target.value });
      },
      [onChange, options]
    );

    const onChangeTextAlign = useCallback(
      (e) => {
        onChange('style', { ...options?.style, textAlign: e.target.value });
      },
      [onChange, options]
    );

    return (
      <>
        <FormItem label="数据绑定ID" tooltip="数据存储的名称/英文/必填">
          <Input onChange={onChangeName} value={options?.name as string} />
        </FormItem>

        <FormItem label="标题">
          <Input placeholder="请输入" onChange={onChangeLabel} value={options?.label as string} />
        </FormItem>

        <FormItem label="标题(EN)">
          <Input placeholder="请输入" onChange={onChangeLabelEn} value={options?.labelEn as string} />
        </FormItem>

        {!hidePlaceholder && (
          <>
            <FormItem label="占位符文本">
              <Input placeholder="请输入" onChange={(e) => onChangePlaceholder?.(e.target.value)} value={placeholder} />
            </FormItem>
            <FormItem label="占位符文本(EN)">
              <Input placeholder="请输入" onChange={(e) => onChangePlaceholderEn?.(e.target.value)} value={placeholderEn} />
            </FormItem>
          </>
        )}

        {children}

        <FormItem className="antd-form-item-row" label="禁用">
          <Checkbox onChange={onChangeDisabled} checked={options?.disabled} />
        </FormItem>

        {!hideRate && (
          <FormItem label="字段占比">
            <Radio.Group value={options?.style?.width} onChange={onChangeWidth}>
              <Radio.Button value={'25%'}>25%</Radio.Button>
              <Radio.Button value={'50%'}>50%</Radio.Button>
              <Radio.Button value={'75%'}>75%</Radio.Button>
              <Radio.Button value={'100%'}>100%</Radio.Button>
            </Radio.Group>
          </FormItem>
        )}

        {showTextAlign &&
          <FormItem label="对齐方式">
            <Radio.Group value={options?.style?.textAlign} onChange={onChangeTextAlign}>
              <Radio.Button value={'left'}>左对齐</Radio.Button>
              <Radio.Button value={'center'}>居中对齐</Radio.Button>
              <Radio.Button value={'right'}>右对齐</Radio.Button>
            </Radio.Group>
          </FormItem>}

        {!hideRequired && (
          <FormItem className="antd-form-item-row" label="必填">
            <Checkbox onChange={onChangeRequired} checked={options?.required} />
          </FormItem>
        )}

        <ShowPrintController onChange={onChange} print={options?.print}
        />
      </>
    );
  }
);
